<template>
  <el-form-item label-width="0">
    <el-divider class="custom-divider-margin-top">{{ i18nt('designer.setting.optionsSetting') }}</el-divider>
    <el-tabs type="border-card" v-model="active" style="margin-top: 15px">
      <el-tab-pane label="静态数据" name="1">
        <option-items-setting :designer="designer" :selected-widget="selectedWidget"></option-items-setting>
      </el-tab-pane>
      <el-tab-pane label="api数据" name="2">
        <el-form-item label="api数据选择">
          <div class="optionItem">
            <el-input disabled size="mini" v-model="optionModel.apiData"></el-input>
            <div class="bind" @click="dVisible=true"
                 :class="{'bindData':optionModel.apiData}">
              <svg-icon icon-class="code"/>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="实际值">
          <span slot="label">
            实际值
             <el-tooltip effect="light" content="选中后的value值">
                <i class="el-icon-info"></i>
             </el-tooltip>
          </span>

          <el-input size="mini" v-model="optionModel.value_"></el-input>
        </el-form-item>
        <el-form-item label="显示值">
           <span slot="label">
            显示值
             <el-tooltip effect="light" content="显示在页面上的label值">
                <i class="el-icon-info"></i>
             </el-tooltip>
          </span>

          <el-input size="mini" v-model="optionModel.label_"></el-input>
        </el-form-item>
      </el-tab-pane>
      <el-tab-pane label="数据字典" name="3">
        <el-form-item label="api数据选择">
          <div class="optionItem">
            <el-input disabled size="mini" v-model="optionModel.apiCode"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="实际值">
          <span slot="label">
            实际值
             <el-tooltip effect="light" content="选中后的value值">
                <i class="el-icon-info"></i>
             </el-tooltip>
          </span>

          <el-input size="mini" v-model="optionModel.value_"></el-input>
        </el-form-item>
        <el-form-item label="显示值">
           <span slot="label">
            显示值
             <el-tooltip effect="light" content="显示在页面上的label值">
                <i class="el-icon-info"></i>
             </el-tooltip>
          </span>

          <el-input size="mini" v-model="optionModel.label_"></el-input>
        </el-form-item>
      </el-tab-pane>
    </el-tabs>
    <select-model-data :selectedWidget="selectedWidget"
                       :visible.sync="dVisible"
                       :show="['dataSource']"
                       keyType="apiData"
                       :designer="designer">
    </select-model-data>
  </el-form-item>
</template>

<script>
import i18n from "@/utils/i18n"
import OptionItemsSetting from "@/components/form-designer/setting-panel/option-items-setting"
import SvgIcon from "@/components/svg-icon/index.vue";
import SelectModelData from "@/components/form-designer/config-common/select-model-data/select-model-data.vue";

export default {
  name: "optionItems-editor",
  mixins: [i18n],
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },
  components: {
    SelectModelData,
    SvgIcon,
    OptionItemsSetting,
  },
  data() {
    return {
      active: this.optionModel.apiCode ? "3": "1",
      dVisible: false
    }
  }
}
</script>

<style scoped lang="scss">
.optionItem {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.bind {
  cursor: pointer;
}

.bindData {
  background: $--color-primary;
  color: white;
  border-radius: 4px;
}
</style>
